<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" type="text/javascript"></script>
</head>
<body>
    <!-- 
        常用的生命周期钩子:
                1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
                2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
        关于销毁Vue实例
                1.销毁后借助Vue开发者工具看不到任何信息。
                2.销毁后自定义事件会失效,但原生DOM事件依然有效。
                3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。


     -->
    <div id="box">
        <h2 :style="{opacity}">欢迎光临！！</h2>
        <p>{{n}}</p>
        <button @click="n++">+1</button>
        <button @click="bye">销毁vm</button>
    </div>

    <script>
        Vue.config.productionTip = false;  //阻止vue在启动时生成生产提示
        //创建实例
       new Vue({
        el:"#box",
        data:{
            opacity:1,
            n:1
        },
        methods: {
            bye(){
                this.$destroy();
            }
        },

        
        //生命周期函数
        //beforeCreate 此时:无法通过vm访问到data中的数据、methods中的方法。
        beforeCreate() {
            console.log('beforeCreate',)  //输出的vue实例并没有data数据，也没有method方法 
            // debugger;
        },
        //create 此时:可以通过vm访问到data中的数据、methods中配置的方法。
        created() {
            console.log('created',)
        },
        //beforeMounted 此时:1.页面呈现的是未经Vue编译的DOM结构。2.所有对DOM的操作，最终都不奏效。
        beforeMount() {
            console.log('beforemount')
        },

        //mounted Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        // 此时:1.页面中呈现的是经过Vue编译的DOM.
        // 2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
        mounted(){
            console.log('mounted');
            // setInterval(()=>{
            //     this.opacity -= 0.005;
            //     if(this.opacity<=0){
            //         this.opacity =  1;
            //     }
            // },15)
        },
        //beforeUpdata 此时:数据是新的，但页面是旧的，即:页面尚未和数据保持同步。
        beforeUpdate() {
            console.log('beforeUpdate');
            // console.log(this.n);
            // console.log(this);
            // debugger;
        },
        //uodated 此时:数据是新的，页面也是新的，即:页面和数据保持同步。
        updated() {
            console.log('updated');
            // console.log(this.n);
            // debugger;
        },
        //beforeDestroy 此时: vm中所有的:data、methods、指令等等，都处于可用状态，马上要执行销毁过程,
        //                一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作，
        beforeDestroy() {
            console.log('beforeDestroy');
            console.log(this);
            // debugger;  //在此阶段，对数据的修改不会触发页面更新
        },
        watch:{
            n(newValue,oldValue){
                console.log('newValue:',newValue);
                console.log("oldValue",oldValue);
            }
        }
       })

    </script>
</body>
</html>